import { mapGetters } from "vuex";
import Actionsheet from "vux/src/components/actionsheet/index.vue";
import base64 from "vux/src/tools/base64/index.js";

import template from "./personalTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  data() {
    return {
      pikerShow: false,
      example: {
        img: "",
        autoCrop: true,
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        size: 0.5,
      },
      showCropper: false,

      actFlag: false,
      actMenus: {
        list1:
          '从手机相册选择<input type="file" accept="image/*"  @change="inputImg"  ref="avater" class="inputFileAvatar" />',
        list2: "从系统头像选择",
      },
    };
  },
  components: {
    Actionsheet,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  methods: {
    actClick(key) {
      if (key == "list1") {
        console.log(document.querySelector(".inputFileAvatar"));
        document
          .querySelector(".inputFileAvatar")
          .addEventListener("change", (e) => {
            this.inputImg(e);
          });
        return;
      }
      if (key == "list2") {
        this.$router.push({ path: "/avaterPage" });
        return;
      }
      console.log(key);
    },

    removeImg() {
      this.userInfo.avatar = "";
    },
    inputImg(e) {
      this.pikerShow = false;
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage: function (file) {
      if (typeof FileReader === "undefined") {
        this.$vux.alert.show({
          content: "您的浏览器不支持图片上传，请升级您的浏览器",
        });
        return false;
      }
      let vm = this;
      let maxSize = 4;
      let reader = new FileReader();
      let imgUrlBase64;
      if (file) {
        if (!/\.(?:JPG|GIF|PNG|JPEG|BMP)$/i.test(file.name)) {
          vm.$vux.alert.show({
            content: "仅支持JPG、GIF、PNG、JPEG、BMP格式",
          });
          return false;
        }
        if (file.size > maxSize * 1024 * 1024) {
          vm.$vux.alert.show({
            content: "上传失败，请上传不大于" + maxSize + "M的图片！",
          });
          return false;
        }

        imgUrlBase64 = reader.readAsDataURL(file);
        reader.onload = function (e) {
          vm._reviseAvatar(reader.result.split(",")[1]);
        };
      }
    },
    sexSelect(menuKey, menuItem) {
      let vm = this;
      vm.value = false;
      if (menuKey == "menu1") {
      } else if (menuKey == "menu2") {
        vm.$refs.avater.focus = function (e) {
          vm.inputImg(e);
        };
      }
    },
    _reviseAvatar(value) {
      let vm = this;
      let params = {};
      params.token = localStorage.getItem("token");
      params.avatar = value;
      vm.$vux.loading.show();
      vm.$http
        .post(vm.urlRequest + "?m=api&c=user&a=saveAvatar", params)
        .then((res) => {
          if (res.status == 0) {
            vm.userInfo.avatar = res.avatar;
            this.$vux.toast.show({
              text: "上传成功",
            });
          }
          vm.$vux.loading.hide();
        })
        .catch((err) => {
          vm.$vux.loading.hide();
          this.$vux.toast.show({
            text: "上传失败",
          });
          console.log(err);
        });
    },
    goRouter(path) {
      this.$router.push({ path });
    },
  },
};

// WEBPACK FOOTER //
// ./src/components/personalCenter/personal/personal.vue
